{% extends 'base.html' %}
{% load humanize %}
{% load custom_filters  %}
{% load math_extras %}
{% block content %}
<h1 class="text-3xl font-semibold text-center text-gray-800 my-6">Etat des stocks</h1>
        
<br>

        {% csrf_token %}
        <table>
          <tr>
              <td style="width: 90%;">
                <button  id="reafresh" name="reafresh"   class= "btn btn-outline-success" >Accualiser</button>
                <button  id="erp" name="erp"   class= "btn btn-outline-success" >Générer les mouvements ERP</button>
                <div id="loading-overlay" style="
                  display:none;
                  position: fixed;
                  top: 0; left: 0;
                  width: 100%; height: 100%;
                  background: rgba(0,0,0,0.4);
                  z-index: 9999;
                  text-align: center;
              ">
                  <div style="
                      position: absolute;
                      top: 50%; left: 50%;
                      transform: translate(-50%, -50%);
                      color: white;
                      font-size: 20px;
                  ">
                      ⏳ Traitement en cours...<br>
                      Veuillez patienter
                  </div>
              </div>
              </td>
              <td style="width: 10%; text-align: right;">
                
              </td>
              <td style="width: 10%" ></td>
              
          </tr>
       </table>
       <table class="table table-striped" border="1" name="pdp_products" id="pdp_products">
        <thead>
          <tr >
              <th style="text-align: center;vertical-align: middle;" onclick="sortTable(0)">Id</th>
              <th style="text-align: center;vertical-align: middle;" onclick="sortTable(0)">Code</th>
              <th style="text-align: center;vertical-align: middle;" onclick="sortTable(1)">Désignation</th>
              <th style="text-align: center;vertical-align: middle;" onclick="sortTable(2)">Quantité en Stock</th>
              <th style="text-align: center;vertical-align: middle;" onclick="sortTable(2)">Quantité Disponible</th>
          </tr>
        </thead>
        <tbody >

          {% for produit in Articles %}
          
          <tr class="clickable-row">
            <td >
              {{ produit.id }}
            </td>
            <td >
                {{ produit.default_code }}
            </td>
            <td >
                {{ produit.name }}
            </td>
            <td style="text-align: right;width: 100px;">
              {{ produit.qty_available|intspace }}
            </td>
            <td style="text-align: right;width: 100px;">
              {{ produit.virtual_available|intspace }}
            </td>
          {% endfor %}
        </tbody>
      </table>
        
<script> 
$(document).ready(function () {
  $("#reafresh").on("click", function () {

    window.location.href = '/Stock_ERP/';

  });
$("#erp").on("click", function () {

    const btn = $(this);

    // 🔒 Bloquer double clic
    btn.prop("disabled", true);
    btn.text("Traitement en cours...");

    // 🟦 Afficher le loader
    $("#loading-overlay").show();

    $.ajax({
        url: '/Transfert_Inter_Composany/',
        type: 'POST',
        data: {
            csrfmiddlewaretoken: '{{ csrf_token }}'
        },
        success: function (data) {
            alert(data.Response);

            // 🔁 Recharger après succès
            window.location.href = '/Stock_ERP/';
        },
        error: function (xhr, status, error) {
            console.log("Erreur :", error);
            alert("Une erreur s'est produite");

            // 🔓 Réactiver si erreur
            btn.prop("disabled", false);
            btn.text("Générer les mouvements ERP");
            $("#loading-overlay").hide();
        }
    });
});

});

</script>
{% endblock %}